<template>
	<view class="box" v-if="!productId">
		<view class="tito" v-if="menuTop" :style="{ paddingTop: menuTop.top + 5 + 'px', }">
			<view class="text">
				设备
			</view>
		</view>
		<view class="image-text">
			<view class="image">
				<image src="../../static/image/zanwusheibei.png" mode=""></image>
			</view>
			<view class="text">
				暂无设备
			</view>
		</view>
		<view class="increase" @click="getdevices">
			添加设备
		</view>
	</view>
	<view class="boxs" v-else>
		<view class="deviceBj">
			<image src="../../static/image/deviceBj.png" mode=""></image>
		</view>
		<view class="tito" v-if="menuTop" :style="{ paddingTop: menuTop.top + 5 + 'px', }">
			<view class="image-text" @click="getdevices">
				<view class="image">
					<image src="../../static/image/tianjias.png"></image>
				</view>
				<view class="text">
					添加设备
				</view>
			</view>
			<view class="textE">
				设备编号{{ detailDate.code }}
			</view>
		</view>
		<!-- 水波纹 -->
		<view class="water-circle" id="reporterRatio">
			<view class="water water-level-10"></view>
			<view class="filterate-number-rawWater">
				<view class="filterate">
					剩余服务
				</view>
				<view class="number">
					{{ detailDate.leftNumber }}
				</view>
				<view class="rawWater">
					净化前TDS：{{ detailDate.enterTds }}
				</view>
				<view class="rawWater">
					净化后TDS：{{ detailDate.outTds }}
				</view>
			</view>
		</view>
		<view style="position: relative;">
			<view class="numberL">
				净水总量：{{ detailDate.totalwater }}L
			</view>
			<view class="firing-increase-recharge">
				<view class="firing" @click="$refs.popup.open('center')">
					<view class="image">
						<image src="../../static/image/yuancheng.png"></image>
					</view>
					<view class="text">
						远程启动
					</view>
				</view>
				<view class="firing" @click="getsales">
					<view class="image">
						<image src=" ../../static/image/shouhou.png" mode=""></image>
					</view>
					<view class="text">
						申请售后
					</view>
				</view>
				<view class="firing" @click="getSufficient">
					<view class="image">
						<image src="../../static/image/chognzhi.png"></image>
					</view>
					<view class="text">
						充值
					</view>
				</view>
			</view>
		</view>
		<view class="filterelement-progressbar-text">
			<view class="filterelement" v-for="(item, index) in detailDate.suppliesVoList" :key="item.id">
				<view class="name">
					{{ item.suppliesName }}
				</view>
				<view class="progressbar-text">
					<liu-progressbar :bgColor="item.leftPercent > 10 ? '#2590FA' : 'red'" :textInside="false"
						:progress="item.leftPercent" color="#333333" :height="'20rpx'" />
					<view class="text-reset">
						<view class="text">
							{{ item.suppliesRemark || '暂无描述' }}
						</view>
						<view class="reset" v-if="item.leftPercent < 10" @click="getreset(item)">
							复位
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center" :safeArea="false" border-radius="16rpx">
			<view class="remoteBoot">
				<view class="text-icon">
					<view class="text">
						远程启动
					</view>
				</view>
				<view class="mode-text">
					<view :class="kIndex == item.value ? 'texts' : 'text'" v-for="(item, index) in checkboxList"
						:key="index" @click="getscroll(item, index)">
						{{ item.text }}
					</view>
				</view>
				<view class="refuse-open">
					<view class="refuse" @click="$refs.popup.close()">
						取消
					</view>
					<view class="refuse open" @click="opens">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			menuTop: uni.getMenuButtonBoundingClientRect(),
			checkboxId: 1,
			checkboxList: [{
				value: 1,
				text: '开机'
			},
			{
				value: 0,
				text: '关机'
			},
			{
				value: 11,
				text: '同步'
			}
			],
			detailDate: {},
			productId: "", //设备Id
			time: '12:01',
			kIndex: 1,
		};
	},
	onShow() {
		this.defaultProduct()
	},
	methods: {
		//启动确定 
		async opens() {
			let data = {
				productId: this.productId,
				command: this.kIndex, //类型: 0-关机, 1-开机, 11-同步
			}
			let res = await this.$request.get("/water-platform-app-api/product/product/sendCommand", data)
			if (res.code == 0) {
				console.log(res, '----启动确定----');
				uni.showToast({
					title: this.kIndex == 0 ? '关机成功' : this.kIndex == 1 ? '开机成功' : '同步成功',
					icon: "none"
				})
				this.$refs.popup.close()
				this.productDetail(this.productId)
			}
		},
		//复位
		async getreset(e) {
			let data = {
				id: e.id,
				productId: this.productId,
			}
			let res = await this.$request.get("/water-platform-app-api/product/product/suppliesReset", data)
			if (res.code == 0) {
				console.log(res, '----//复位ID----');
				this.productDetail(this.productId)
			}
		},
		//首页默认设备ID
		async defaultProduct() {
			let res = await this.$request.get("/water-platform-app-api/product/product/defaultProduct")
			if (res.data != 0) {
				console.log(res, '----首页默认设备ID----');
				this.productId = res.data
				this.productDetail(res.data)
			}
		},
		//设备id 获取信息
		async productDetail(id) {
			let res = await this.$request.get("/water-platform-app-api/product/product/detail", {
				id: id
			})
			if (res.data) {
				console.log(res, '----设备id 获取信息ID----');
				this.detailDate = res.data
			}
		},
		getscroll(item, index) {
			this.kIndex = item.value
		},
		getdevices() {
			uni.navigateTo({
				url: "/subpackageA/pages/device/increaseDevice"
			})
		},
		handleCheckboxChange(event) {
			const checkedId = event.detail.value[0];
			this.paymentId = checkedId;
		},
		bindTimeChange(e) {
			this.time = e.detail.value
		},
		getsales() {
			uni.navigateTo({
				url: "/subpackageA/pages/device/salesService?productId=" + this.productId + "&detailDate=" +
					JSON.stringify(this.detailDate)
			})
		},
		//充值
		getSufficient() {
			uni.navigateTo({
				url: "/subpackageA/pages/device/recharge?productId=" + this.productId
			})
		},
	}
}
</script>

<style lang="scss">
.box {
	min-height: 100vh;
	background: linear-gradient(360deg, #F3F5F6 0%, #F3F5F6 60%, rgba(212, 231, 250, 0) 70%, #D4E7FA 100%);
	overflow: hidden;

	.tito {
		display: flex;
		box-sizing: border-box;
		margin-bottom: 62rpx;
		justify-content: center;

	}

	.image-text {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 192rpx;

		.image {
			image {
				width: 360rpx;
				height: 360rpx;
			}
		}

		.text {
			font-size: 32rpx;
			color: #C3CED9;
			margin-top: 32rpx;
		}
	}

	.increase {
		width: 690rpx;
		height: 88rpx;
		background: #2590FA;
		border-radius: 100rpx 100rpx 100rpx 100rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		margin: 144rpx auto;
	}
}



.boxs {
	min-height: 100vh;
	position: relative;
	padding: 30rpx;
	box-sizing: border-box;

	@keyframes real {
		0% {
			transform: translate(-50%, -60%) rotate(0deg);
		}

		100% {
			transform: translate(-50%, -60%) rotate(360deg);
		}
	}

	@keyframes virtual {
		0% {
			transform: translate(-50%, -55%) rotate(0deg);
		}

		100% {
			transform: translate(-50%, -55%) rotate(360deg);
		}
	}

	.deviceBj {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;

		image {
			width: 100%;
			height: 946rpx;
		}
	}

	.tito {
		display: flex;
		box-sizing: border-box;
		margin-bottom: 62rpx;
		position: relative;

		.image-text {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.image {
				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.text {
				font-size: 20rpx;
				color: #2E3033;
			}
		}

		.textE {
			font-weight: 600;
			font-size: 32rpx;
			color: #14171A;
			margin-left: 50%;
			transform: translateX(-100%);
		}
	}

	.water-circle::after {
		//插入伪元素
		position: absolute; //伪元素定位属性
		content: '';
		background: linear-gradient((180deg, rgba(150, 225, 250, 1), rgba(37, 144, 250, 1))); //伪元素背景颜色渐变
		bottom: 0;
		right: 0;
		left: 0;
		top: 0; //定义伪元素出现的位置
		z-index: -1;
		transform: scale(1.1); //伪元素放大1.1倍
		border-radius: 50%; //伪元素也是个圆
	}

	/* 水位球样式 Create by trainer 2023/07/23 */
	.water-circle {
		position: relative;
		width: 336rpx;
		height: 336rpx;
		box-shadow: 0rpx 24rpx 60rpx 0rpx rgba(37, 144, 250, 0.5);
		border-radius: 50%;
		margin: 0 auto;



		.water {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgb(198, 225, 251);
			border-radius: 50%;
			overflow: hidden;
		}

		.water::after {
			content: '';
			position: absolute;
			top: 0;
			left: 50%;
			width: 150%;
			height: 150%;
			border-radius: 40%;
			background-color: #FFF;
			animation: real 5s linear infinite;
		}

		/* 水位高度top: 35% ~ -65% */
		.water::before {
			content: '';
			position: absolute;
			top: 0;
			left: 50%;
			width: 150%;
			height: 150%;
			border-radius: 42%;
			background-color: rgb(222, 237, 252);
			animation: virtual 7s linear infinite;
		}
	}

	/* 定制浮动水位样式 */
	.water-level-10::after,
	.water-level-10::before {
		top: 30%;
	}

	.filterate-number-rawWater {
		position: absolute;
		top: 60rpx;
		left: 50%;
		text-align: center;
		transform: translateX(-50%);

		.filterate {
			font-size: 24rpx;
			color: #2590FA;
		}

		.number {
			font-weight: 600;
			font-size: 120rpx;
			color: #2590FA;
		}

		.rawWater {
			font-size: 20rpx;
			color: #66B2FF;
		}
	}

	.numberL {
		text-align: center;
		font-size: 28rpx;
		color: #2590FA;
		margin-top: 64rpx;
	}

	.firing-increase-recharge {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 48rpx;

		.firing {
			text-align: center;

			.image {
				image {
					width: 96rpx;
					height: 96rpx;
				}
			}

			.text {
				font-size: 24rpx;
				color: #2E3033;
				margin-top: -16rpx;
			}
		}
	}

	.filterelement-progressbar-text {
		margin-top: 160rpx;

		.filterelement:first-child {
			margin-top: 0rpx;
		}

		.filterelement {
			display: flex;
			margin-top: 32rpx;

			.name {
				font-size: 28rpx;
				color: #14171A;
				width: 17%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.progressbar-text {
				margin-left: 24rpx;
				flex: 1;

				.text-reset {
					display: flex;
					margin-top: 16rpx;

					.text {
						font-size: 20rpx;
						color: #616366;
					}

					.reset {
						margin-left: auto;
						width: 80rpx;
						height: 36rpx;
						background: #2590FA;
						border-radius: 100rpx 100rpx 100rpx 100rpx;
						font-size: 20rpx;
						color: #FFFFFF;
						line-height: 36rpx;
						text-align: center;
					}
				}
			}
		}
	}
}

.remoteBoot {
	width: 616rpx;
	height: 404rpx;
	background: #FFFFFF;
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	padding: 48rpx;
	box-sizing: border-box;

	.text-icon {
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.text {
			font-weight: 600;
			font-size: 32rpx;
			color: #14171A;
			margin-right: 230rpx;
		}

		.icon {}
	}

	.mode-text {
		margin-top: 64rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;



		.text {
			width: 152rpx;
			height: 72rpx;
			background: #F4F5F6;
			border-radius: 8rpx;
			line-height: 72rpx;
			text-align: center;
			font-size: 28rpx;
			color: #2E3033;
		}

		.texts {
			width: 152rpx;
			height: 72rpx;
			background: #E1EDFA;
			border-radius: 8rpx;
			border: 2rpx solid #2590FA;
			line-height: 72rpx;
			text-align: center;
			font-size: 28rpx;
			color: #2590FA;
		}
	}

	.refuse-open {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 48rpx;

		.refuse {
			width: 216rpx;
			height: 72rpx;
			border-radius: 100rpx 100rpx 100rpx 100rpx;
			border: 2rpx solid #2590FA;

			line-height: 72rpx;
			text-align: center;
		}

		.open {
			background-color: #2590FA;
			color: #FFF;
		}
	}
}

.checkboxGroup {
	margin-left: 62rpx;
	margin-top: 50rpx;

	::v-deep .checklist-group {
		// grid-gap: 60rpx;
		justify-content: space-between;
	}
}
</style>